<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>寝室信息</title>
    <!-- Fav  Icon Link -->
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!-- themify icons CSS -->
    <link rel="stylesheet" th:href="@{/css/themify-icons.css}">
    <!-- Animations CSS -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!-- Main CSS -->
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" th:href="@{/css/green.css}" id="style_theme">
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
    <!-- morris charts -->
    <link rel="stylesheet" th:href="@{/charts/css/morris.css}">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/css/jquery-jvectormap.css}">
    <link rel="stylesheet" th:href="@{/datatable/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">

    <script th:src="@{/js/modernizr.min.js}"></script>
</head>

<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>


<div class="wrapper">
    <div id="content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="widget-area-2 lochana-box-shadow">
                        <h3 class="widget-title">全部寝室 </h3>
                        <div class="table-responsive mb-3">
                            <table id="tableId" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th class="no-sort">
                                        <div class="custom-control custom-checkbox">
                                            <input class="custom-control-input" type="checkbox" id="select-all">
                                            <label class="custom-control-label" for="select-all"></label>
                                        </div>
                                    </th>
                                    <th>楼房号</th>
                                    <th>寝室号</th>
                                    <th>寝室类型</th>
                                    <th>应住人数</th>
                                    <th>实住人数</th>
                                    <th>电话</th>
                                    <th>寝室财产</th>
                                    <th>备注</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="dorms:${dorms}">
                                    <td>
                                        <div class="custom-control custom-checkbox">
                                            <input class="custom-control-input" type="checkbox" th:id="${dorms.id}"
                                                   name="id" th:value="${dorms.id}">
                                            <label class="custom-control-label" th:for="${dorms.id}"></label>
                                        </div>
                                    </td>
                                    <td th:text="${dorms.houId}"></td>
                                    <td th:text="${dorms.dorId}"></td>
                                    <td th:text="${dorms.dorIex}"></td>
                                    <td th:text="${dorms.dorNum}"></td>
                                    <td th:text="${dorms.dorPrice}"></td>
                                    <td th:text="${dorms.tel}"></td>
                                    <td th:text="${dorms.rich}"></td>
                                    <td th:text="${dorms.dorDes}"></td>
                                </tr>
                                </tbody>
                            </table>

                            <button type="button" class="btn btn-info mt-3 mb-0" onclick="openAddModal()"><span
                                    class="ti-pencil-alt"></span> 增加
                            </button>

                            <button type="button" class="btn btn-danger mt-3 mb-0" onclick="delHouse()"><span
                                    class="ti-trash"></span> 删除
                            </button>
                            <button type="button" class="btn btn-primary mt-3 mb-0" onclick="openEditModal()"><span
                                    class="ti-pencil-alt"></span> 编辑
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
    <span class="ti-angle-up"></span>
</a>

<!--修改模态框-->
<div class="modal fade" id="editModal" data-th-background="static" data-th-keytype="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--顶部标题-->
            <div class="modal-header">
                <!--标题-->
                <h5>修改寝室信息</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!--内容-->
            <div class="modal-body">
                <form id="formEditDoctor" action="/dorm/dormUpdate" method="post">
                    <input type="text" hidden id="id" name="id">
                    <div class="form-group col-md-6">
                        <label for="houId">楼房号</label>
                        <input type="text" class="form-control" placeholder="houId" id="houId" name="houId"
                               readonly="readonly">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dorId">寝室号</label>
                        <input type="text" class="form-control" placeholder="dorId" id="dorId" name="dorId">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dorIex">寝室类型</label>
                        <input type="text" class="form-control" placeholder="dorIex" id="dorIex" name="dorIex"
                        >
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dorNum">应住人数</label>
                        <input type="text" class="form-control" placeholder="dorNum" id="dorNum" name="dorNum"
                               onchange="queryNum2()">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="tel">电话</label>
                        <input type="text" class="form-control" placeholder="tel" id="tel" name="tel"
                               onchange="queryNum4()">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="rich">寝室财产</label>
                        <input type="text" class="form-control" placeholder="rich" id="rich" name="rich"
                        >
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dorDes">备注</label>
                        <input type="text" class="form-control" placeholder="dorDes" id="dorDes" name="dorDes">
                    </div>
                    <div class="form-group col-md-6 mb-3">
                        <button type="submit" class="btn btn-primary btn-lg">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--增加模态框-->
<div class="modal fade" id="addModal" data-th-background="static" data-th-keytype="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--顶部标题-->
            <div class="modal-header">
                <!--标题-->
                <h5>增加宿舍信息</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!--内容-->
            <div class="modal-body">
                <form id="formEditDoctor1" action="/dorm/dormAdd" method="post" onsubmit=" return ss()">
                    <input type="text" hidden id="id1" name="id">
                    <div class="form-group col-md-6">
                        <label for="houId">楼房号</label>
                        <select class="form-control" id="houId1" name="houId">
                            <option value="11" id="select1"></option>
                            <option th:each="house:${house}" th:value="${house.houId}"
                                    th:text="${house.houId}"></option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dorId">寝室号</label>
                        <input type="text" class="form-control" placeholder="dorId" id="dorId1" name="dorId">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dorIex">寝室类型</label>
                        <input type="text" class="form-control" placeholder="dorIex" id="dorIex1" name="dorIex"
                        >
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dorNum">应住人数</label>
                        <input type="text" class="form-control" placeholder="dorNum" id="dorNum1" name="dorNum"
                               onchange="queryNum22()">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="tel">电话</label>
                        <input type="text" class="form-control" placeholder="tel" id="tel1" name="tel"
                               onchange="queryNum44()">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="rich">寝室财产</label>
                        <input type="text" class="form-control" placeholder="rich" id="rich1" name="rich"
                               >
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dorDes">备注</label>
                        <input type="text" class="form-control" placeholder="dorDes" id="dorDes1" name="dorDes">
                    </div>
                    <div class="form-group col-md-6 mb-3">
                        <button type="submit" class="btn btn-primary btn-lg">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- /Back to Top -->
<!-- Jquery Library-->
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<!-- Popper Library-->
<script th:src="@{/js/popper.min.js}"></script>
<!-- Bootstrap Library-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Datatable  -->
<script th:src="@{/datatable/jquery.dataTables.min.js}"></script>
<script th:src="@{/datatable/dataTables.bootstrap4.min.js}"></script>
<!-- Custom Script-->
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/js/custom-datatables.js}"></script>


<script th:inline="javascript">
    /*全选*/
    $("#select-all").click(function () {
        $("input[name='id']").each(function () {
            if (this.checked) {
                this.checked = false;
            } else {
                this.checked = true;
            }
        });
    })


    /*批量删除*/
    function delHouse() {
        var result = "";
        var count = 0;
        $("input[name='id']:checked").each(function () {
            if ($(this).is(':checked')) {
                result += $(this).attr('value') + ",";
                count++;
            } else {
            }
        });
        if (!confirm("确定删除这" + count + "条寝室信息?")) {
            return;
        }
        if (result == "") {
            alert("请选择您要删除的数据")
        } else {
            window.location.href = "/dorm/deleteDorm?tag=" + result;
            alert("删除成功");
        }
    }

    /*打开增加模态框*/
    function openAddModal() {
        $("#addModal").modal('show');
        //默认选择第一个下拉框
        document.getElementById("select1").selected = 'selected';
    }

    //增加判断有没有选择宿舍楼
    function ss(){
        var slt=document.getElementById("houId1");
        if(slt.value=="11"){
            alert("请选择宿舍楼");
            return false;
        }
        return true;
    }

    /*打开修改模态框*/
    function openEditModal() {
        var id = "";
        $("input[name='id']:checked").each(function () {
            id = $(this).attr('value');
        });
        if (id == "") {
            alert("请选择要修改的数据")
        } else {

            $.ajax({
                cache: true,
                type: "get",
                url: "/dorm/findOneDorm",
                data: {"id": id},
                success: function (data) {
                    console.log(data);
                    $("#houId").val(data[0].houId);
                    $("#dorId").val(data[0].dorId);
                    $("#dorIex").val(data[0].dorIex);
                    $("#dorNum").val(data[0].dorNum);
                    $("#tel").val(data[0].tel);
                    $("#rich").val(data[0].rich);
                    $("#dorDes").val(data[0].dorDes);

                },
                error: function () {
                    notifyError("获取数据失败，请重新刷新！")
                }
            });
            $("#id").val(id);
            $("#editModal").modal('show');

        }
    }


    /*判断是否为正整数 */
    function queryNum2() {

        var dorNum = $("#dorNum").val();

        var r = /^[0-9]*[1-9][0-9]*$/　　//正整数
        if (r.test(dorNum)) {
            return true;
        } else {
            alert("请输入正整数")
        }
    }



    /*判断是否电话号码 */
    function queryNum4() {
        var tel = document.getElementById('tel').value;
        var reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/; //校验手机号和固定电话
        var gu = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
        if (!reg.test(tel) || !gu.test(tel)) {
            return alert("请输入正确的手机号");
        }

    }

    /*判断是否为正整数 */
    function queryNum22() {

        var dorNum = $("#dorNum1").val();

        var r = /^[0-9]*[1-9][0-9]*$/　　//正整数
        if (r.test(dorNum)) {
            return true;
        } else {
            alert("请输入正整数")
        }
    }



    /*判断是否电话号码 */
    function queryNum44() {
        var tel = document.getElementById('tel1').value;
        var reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/; //校验手机号和固定电话
        var gu = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
        if (!reg.test(tel) || !gu.test(tel)) {
            return alert("请输入正确的手机号");
        }

    }
</script>


</body>
</html>